<template>
  <div class="user-info">
    <div class="cover">
      <div class="cover-image">
        <img :src="userInfo.coverUrl | squareUrls" alt />
      </div>
      <div class="name" v-if="userInfo.name">
        <h3>{{userInfo.name}}</h3>
        <p @click="gotoUserInfo(userInfo._id)">TA的个人主页 ></p>
      </div>
      <div class="sex" v-if="userInfo.sex">{{userInfo.sex}}</div>
    </div>
    <div class="number">
      <ul>
        <li>
          <h4>说说</h4>
          <p>{{ userInfo.ssDataNumber }}</p>
        </li>
        <li>
          <h4>日志</h4>
          <p>{{ userInfo.rzDataNumber }}</p>
        </li>
        <li>
          <h4>照片</h4>
          <p>{{ userInfo.photosNumber }}</p>
        </li>
        <li>
          <h4>相册</h4>
          <p>{{ userInfo.albumNumber }}</p>
        </li>
        <li>
          <h4>视频</h4>
          <p>{{ userInfo.videoNumber }}</p>
        </li>
        <li>
          <h4>视频库</h4>
          <p>{{ userInfo.videosNumber }}</p>
        </li>
        <li>
          <h4>技术文章</h4>
          <p>{{ userInfo.skillNumber }}</p>
        </li>
        <li>
          <h4>积分</h4>
          <p>{{ userInfo.integral }}</p>
        </li>
        <li>
          <h4>会员等级</h4>
          <p>{{ userInfo.class }}</p>
        </li>
        <li>
          <h4>账号状态</h4>
          <p>{{ userInfo.state ===0 ? "正常" : "异常" }}</p>
        </li>
      </ul>
    </div>
    <div class="message" v-if="userName !== userInfo.userName">
      <el-button size="mini" @click="sendMessage()">发送私信</el-button>
    </div>
  </div>
</template>

<script>
import { mapState } from "Vuex";
export default {
  name: "user-info",
  props: {
    userInfo: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  methods: {
    gotoUserInfo(id) {
      this.$router.push("/userinfo/" + id);
    },
    sendMessage() {      
      this.$emit("sendMessage");
    }
  },
  computed: {
    ...mapState("user", ["userName"])
  }
};
</script>

<style lang="sass" scoped>
@import '@/assets/default.sass'
.user-info
  width: 100%
  background-color: #fff
  padding: 20px
  .cover
    width: 100%
    height: 42px
    position: relative
    @include flex(space-between,flex-start)
    .cover-image
      flex: 0 0 42px
      height: 100%
      overflow: hidden
      border-radius: 5px
      @include flex(center,center)
      >img
        width: 100%
        height: auto
    .name
      flex: 1
      padding: 0 20px
      height: 100%
      >h3
        width: 100%
        height: 28px
      >p
        width: 100%
        height: 14px
        color: #0487dc
        cursor: pointer
        &:hover
          text-decoration: underline
    .sex
      position: absolute
      right: 5px
      bottom: 5px
      color: #2eb037
  .number
    margin-top: 20px          
    >ul
      width: 100%
      @include align(flex-start)
      >li
        width: 20%
        padding: 2% 1%
        @include align(center)
        >h4
          flex: 0 0 100%
          font-size: 12px
          text-align: center
        >p
          flex: 0 0 100%
          height: 30px
          line-height: 30px
          font-weight: 700
          color: #555
          text-align: center
  .message
    border-top: 1px solid #eee
    width: 100%
    padding-top: 10px
    height: 40px
    @include flex(center,center)
    .el-button
      width: 60%
      font-size: 16px
</style>